<template>
    <div class="quan-main">
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/admin/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="quan-body">
            <div class="e-item">
                <h3>商品分类状况</h3>
                <div class="echarts-box" id="echarts-type">

                </div>
            </div>
            <div class="e-item">
                <h3>商品分布状况</h3>
                <div class="echarts-box" id="echarts-address">
                    
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import api from '@/api/adminIndex/index'
export default {
    data() {
        return {
            // 指定配置项和数据
            type_option:{
                // title: {
                //     text: '南丁格尔玫瑰图',
                //     subtext: '纯属虚构',
                //     left: 'center'
                // },
                color: ["#00e28b", "#fac858", "#ed8884", "#ff9f7f", "#fc8452", "#73c0de"],
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    top: '80%',
                },
                // toolbox: {
                //     show: true,
                //     feature: {
                //         mark: {show: true},
                //         dataView: {show: true, readOnly: false},
                //         restore: {show: true},
                //         saveAsImage: {show: true}
                //     }
                // },
                series: [
                    {
                        name: '商品数量',
                        type: 'pie',
                        radius: ["10%", "55%"],
                        center: ["50%", "39%"],
                        // 面积模式
                        roseType: 'area',
                        // 半径模式
                        // roseType: 'radius',
                        // 这里是把边框修改成圆角，但是没起作用
                        itemStyle: {
                            borderRadius: 5
                        },
                        data: [
                            // {value: 30, name: 'rose 1'},
                            // {value: 28, name: 'rose 2'},
                            // {value: 26, name: 'rose 3'},
                            // {value: 24, name: 'rose 4'},
                            // {value: 22, name: 'rose 5'},
                            // {value: 20, name: 'rose 6'},
                        ]
                    }
                ]
            },
            address_option:{
                color: ["#00e28b"],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '16%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisTick: {
                            // 保证刻度和标签对齐
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '商品数量',
                        type: 'bar',
                        barWidth: '60%',
                        // 是否展示背景还有设置背景的样式
                        // showBackground: true,
                        // backgroundStyle: {
                        //     color: 'rgba(180, 180, 180, 0.2)'
                        // },
                        // 这里是把柱子修改成圆角，但是还不好看一些
                        // itemStyle:{
                        //     // 修改柱子圆角
                        //     barBorderRadius:10
                        // },
                        data: [],
                    }
                ]
            }
        }
    },
    methods: {
        
    },
    created() {
        
    },
    mounted() {
        // 实例化对象
        let echarts_address = this.$echarts.init($('#echarts-address').get(0))
        // 获取所有地址上的商品数量
        api.getAllGoodsAddressNum().then(res=>{
            // console.log(res)
            if(res.code !== 200)return
            this.address_option.xAxis[0].data = res.xData
            // console.log(this.address_option.xAxis[0].data)
            this.address_option.series[0].data = res.yData

            // 把配置项给实例对象
            this.address_option && echarts_address.setOption(this.address_option)
        }).catch(err=>{})
        // 让图表跟随屏幕自适应
        window.addEventListener('resize',function(){
            echarts_address.resize()
        })

        // 实例化对象
        let echarts_type = this.$echarts.init($('#echarts-type').get(0))
        // 获取所有分类上的商品数量
        api.getAllGoodsTypeNum().then(res=>{
            // console.log(res)
            if(res.code !== 200)return
            this.type_option.series[0].data = res.data

            // 把配置项给实例对象
            this.type_option && echarts_type.setOption(this.type_option)
        }).catch(err=>{})
        // 让图表跟随屏幕自适应
        window.addEventListener('resize',function(){
            echarts_type.resize()
        })
    },
}
</script>
<style lang="less" scoped>
.e-item{
    display: inline-block;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    text-align: center;
    padding: 30px 30px;
    h3{
        font-size: 18px;
    }
    .echarts-box{
        height: 100%;
    }
}
.e-item:nth-child(1){
    border-right: 1px solid #ededed;
}
</style>